<template>
  <el-container style="width:100%;border: 1px solid #eee">

      <el-menu v-bind:default-active="!isshow?1:''" class="el-menu-vertical-demo" :collapse=true>
        <el-menu-item index="1" @click='showInfo'>
          <template><i class="el-icon-setting"></i><span slot="title">基本信息</span></template>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-message"></i><span slot="title">明细</span></template>
          <el-menu-item index="2-1" @click='showIncome'>流入明细</el-menu-item>
          <el-menu-item index="2-2" @click='showOutcome'>流出明细</el-menu-item>
        </el-submenu>
        <el-menu-item index="3" @click='showPulic'>
          <template><i class="el-icon-setting"></i><span slot="title">公示情况</span></template>
        </el-menu-item>
      </el-menu>

    <el-contianer style="width: 100%;height:100%;padding: 0">
      <el-header style="height: 40px;padding: 0">
        <el-row>
          <el-col :span="24">
            <el-button @click="change" icon="el-icon-arrow-left" style="left: 0">
              后退
            </el-button>
          <center>
            <h1 style='display: inline;font-family: "PingFang SC";color: darkred' >{{detail_name}}</h1>
          </center>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <transition name="el-fade-in">
          <div v-show="isinfo">
            <Info   :detail_name="this.detail_name"/>
          </div>
        </transition>
        <transition name="el-fade-in">
          <div v-show="isoutcome">
            <Outcome  :detail_name="this.detail_name"/>
          </div>
        </transition>
        <transition name="el-fade-in">
          <div v-show="isincome">
            <Income  :detail_name="this.detail_name"/>
          </div>
        </transition>
        <transition name="el-fade-in">
          <div v-show="ispulic">
            <center><h1>还在开发</h1></center>
          </div>
        </transition>
        <transition name="el-fade-in">
          <center>
          <div v-show="ispag">

          </div>
          </center>
        </transition>
      </el-main>
    </el-contianer>
  </el-container>
</template>

<script>
  import Public from '@/components/Detail_components/Public'
  import Income from '@/components/Detail_components/Income'
  import Info from '@/components/Detail_components/Info'
  import Outcome from '@/components/Detail_components/Outcome'

  import Footer from "@/components/Footer";
  export default {
    name: "Detail",
    data() {
      return {
        isinfo: true,
        isincome: false,
        isoutcome: false,
        ispulic: false,
        isCollapse: false,
        ispag:false,
      }
    },
    components: {
      'Public': Public,
      'Income': Income,
      'Outcome': Outcome,
      'Info': Info,
      'Footer': Footer
    },
    props: {
      isshow:
        {
          type:
          Boolean
        },
      detail_name:
        {
          type:
          String
        }
    },
    methods: {
      change() {
        this.$emit("detailClick", true)
      },
      showInfo() {
        this.isinfo = true;
        this.isincome = false;
        this.isoutcome = false;
        this.ispulic = false;
        this.isCollapse = false;
        this.ispag = false;
      },
      showPulic() {
        this.isinfo = false;
        this.isincome = false;
        this.isoutcome = false;
        this.ispulic = true;
        this.isCollapse = false;
        this.ispag = false;
      },
      showOutcome() {
        this.isinfo = false;
        this.isincome = false;
        this.isoutcome = true;
        this.ispulic = false;
        this.isCollapse = false;
        this.ispag = true;
      },
      showIncome() {
        this.isinfo = false;
        this.isincome = true;
        this.isoutcome = false;
        this.ispulic = false;
        this.isCollapse = false;
        this.ispag = true;
      },

    },
    watch:{
      isshow:function (newvalue) {
        if(!newvalue){
          this.showInfo();
          this.isCollapse=false
        }
      },
    },
  }
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 210px;
    min-height: 400px;
  }
  .el-main{
    text-align: center;
  }
</style>

